<template>
    <div>
        <a-collapse default-active-key="1" :bordered="false">
            <template #expandIcon="props">
                <caret-right-outlined :rotate="props.isActive ? 90 : 0"/>
            </template>
            <a-collapse-panel key="1" :header="mapI18n('dataLinkage','数据联动')" class="a-collapse-panel-reception">
                <!--数据联动开关-->
                <template #extra>
                        <span class="checkbox-slot" @click.stop="">
                            <a-switch v-model:checked="config.advancedConf.linkage" size="small"
                                      @change="linkageChange"></a-switch>
                        </span>
                </template>
                <div class="receive-publish-config" v-if="config.advancedConf.linkage">
                    <a-radio-group v-model:value="showType" style="width: 100%">
                        <a-radio-button class="receive-publish-radio" :title="mapI18n('receiveConfiguration', '接收数据配置')" value="receive">
                            {{ mapI18n('receiveConfiguration', '接收数据配置') }}
                        </a-radio-button>
                        <a-radio-button class="receive-publish-radio" :title="mapI18n('publishConfiguration', '发布数据配置')" value="send">
                            {{ mapI18n('publishConfiguration', '发布数据配置') }}
                        </a-radio-button>
                    </a-radio-group>
                    <!--接收数据配置-->
                    <div v-if="showType =='receive'" style="margin-top: 15px">
                        <a-form layout="vertical" :model="config.advancedConf.receive">
                            <a-form-item :label="mapI18n('queryParameter','查询参数来源')">
                                <a-select
                                    default-value="url"
                                    v-model:value="config.advancedConf.receive.type"
                                    :options="sourceAry"
                                    :getPopupContainer="(p) => p.parentNode"
                                    :allowClear="true"
                                    @change="typeChange"
                                >
                                </a-select>
                            </a-form-item>
                            <a-form-item :label="mapI18n('publishComponent','发布事件组件')" style="margin-top: 10px"
                                               v-if="config.advancedConf.receive && config.advancedConf.receive.type == 'event'">
                                <a-select
                                    v-model:value="config.advancedConf.receive.publishComponent"
                                    :options="publishComponent"
                                    allowClear
                                    @change="changeComponent"
                                    :getPopupContainer="(p) => p.parentNode"
                                >
                                </a-select>
                            </a-form-item>
                            <a-form-item :label="mapI18n('parameterMapping','参数映射')" style="margin-top: 10px">
                                <a-button type="primary" ghost style="width: 100%" @click="addParams">
                                    <rx-icon-show icon="icon-lineVue3_add"/>
                                    新增
                                </a-button>
                                <a-collapse v-for="(record,index) in config.advancedConf.receive.mapping" :key="index"
                                            :default-active-key="index" :bordered="false">
                                    <template #expandIcon="props">
                                        <caret-right-outlined :rotate="props.isActive ? 90 : 0"/>
                                    </template>
                                    <a-collapse-panel class="drill-collapse" :header="'映射'+`${index+1}`">
                                        <template #extra>
                                            <rx-icon-show class="collapse-iconfont" @click.stop="removeSelect(record.idx_)" icon="icon-lineVue3_delete"></rx-icon-show>
                                            <rx-icon-show class="collapse-iconfont" @click.stop="moveUp(index)" icon="icon-lineshang"></rx-icon-show>
                                            <rx-icon-show class="collapse-iconfont" @click.stop="moveDown(index)" icon="icon-linexia"></rx-icon-show>
                                        </template>
                                        <div class="drill-collapse-common">
                                            <div>{{ mapI18n('parameterName', '参数名称') }}</div>
                                            <div class="drill-collapse-input">
                                                <a-select
                                                    v-model:value="record.name"
                                                    :options="paramsOptions"
                                                    :getPopupContainer="(p) => p.parentNode"
                                                    :allowClear="true"
                                                >
                                                </a-select>
                                            </div>
                                            <div>{{ mapI18n('sourceValue', '值来源') }}</div>
                                            <div class="drill-collapse-input">
                                                <a-select
                                                    v-model:value="record.valueSource"
                                                    :options="valueSourceDef"
                                                    :getPopupContainer="(p) => p.parentNode"
                                                    :allowClear="true"
                                                >
                                                </a-select>
                                            </div>
                                            <div>{{ mapI18n('parameterValue', '参数值') }}</div>
                                            <div class="drill-collapse-input">
                                                <a-select
                                                    v-model:value="record.valueDef"
                                                    :options="componentParamsDef"
                                                    :allowClear="true"
                                                    :getPopupContainer="(p) => p.parentNode"
                                                    v-if="config.advancedConf.receive.type == 'event' && record.valueSource == 'param'"
                                                >
                                                </a-select>
                                                <a-select
                                                    v-model:value="record.valueDef"
                                                    :options="urlParams"
                                                    :allowClear="true"
                                                    :getPopupContainer="(p) => p.parentNode"
                                                    v-if="config.advancedConf.receive.type == 'url' && record.valueSource == 'param'"
                                                >
                                                </a-select>
                                                <a-input v-model:value="record.valueDef"
                                                         v-if="record.valueSource == 'fixedVar'"></a-input>
                                                <a-input-group v-if="record.valueSource == 'script'" compact>
                                                    <div style="display: flex">
                                                        <a-input style="flex: 1" v-model:value="record.valueDef"/>
                                                        <a-button @click="openScriptQuery(record)">...</a-button>
                                                    </div>
                                                </a-input-group>
                                                <a-select
                                                    v-if="record.valueSource == 'constantVar'"
                                                    v-model:value="record.valueDef"
                                                    :options="constantField"
                                                    allowClear
                                                    :getPopupContainer="(p) => p.parentNode"
                                                ></a-select>
                                            </div>
                                        </div>
                                    </a-collapse-panel>
                                </a-collapse>
                            </a-form-item>
                        </a-form>
                    </div>
                    <!--发布数据配置-->
                    <div v-if="showType =='send'" class="selectPublish">
                        <div>{{ mapI18n('componentParameter', '组件参数') }}</div>
                        <a-select
                            v-model:value="selectPublish"
                            mode="multiple"
                            :placeholder="mapI18n('pleaseSelect','请选择')"
                            style="width: 100%;margin-top: 10px"
                            @change="publishChange"
                        >
                            <a-select-option v-for="item in publishParams" :key="item.label" :value="item.value">
                                {{ item.label }}
                            </a-select-option>
                        </a-select>
                    </div>
                </div>
            </a-collapse-panel>
        </a-collapse>
    </div>
</template>

<script>
import ReceivePublishConfigJs from "./receive-publish-config.js"

export default {
    name: "receive-publish-config",
    mixins: [ReceivePublishConfigJs],
    data() {
        return {
            showType: 'receive'
        }
    },
    methods: {
        mapI18n(name, text, key) {
            return this.$ti18(name, text, "mapLang", key);
        },
    }
}
</script>

<style lang="less">
.drill-collapse-common {
    padding: 14px;
}

.collapse-iconfont {
    font-size: 19px;
    margin-left: 10px;
    font-weight: bold;
}

.drill-collapse {
    border-radius: 4px;
    border: solid 1px #dedede !important;
    margin-top: 16px;

    .ant-collapse-header {
        border-bottom: solid 1px #dedede;
        padding-right: 20px;
    }

    .ant-collapse-arrow {
        left: 10px !important;
    }

    .ant-collapse-header {
        padding-left: 30px !important;
    }
}
.selectPublish {
    padding: 10px;
}

.drill-collapse-input {
    margin-top: 10px;
    margin-bottom: 10px
}
.receive-publish-radio{
    width:50%;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}
</style>
